<template>
	<div class="uploadRes">
		<nav-title title="入职材料补充" :routerLink="routerLink" />
		<div class="upbg" style="padding:0;">
			<div class="progrs">进度情况</div>
			<div class="probar">
				<box gap="20px">
		      <x-progress :percent="percent2" :show-cancel="false"></x-progress>
		    </box>
			</div>
		</div>
		<div class="rightpart">	
		<div class="upbg" v-for="items in allRes" v-if="items.cYesNo1 == 'Y'">
	      <router-link :to="'/infoUploadImage/'+items.cFileNum+'/'+items.cYesNo">
	        <div class="leftIcon">
	          <img src="./image/upicon.png">
	        </div>
	        <div class="midContent">
	          <h6>{{ items.cFileDescr }}</h6>
	          <div v-if="!items.uploaded">
		          <div>尚未上传</div>
		          <div v-if="items.cYesNo == 'Y'">请务必完善</div>
				  <div v-if="items.cYesNo == 'N'">若有，请上传</div>
	          </div>
	          <div v-else>
		          <div>已上传</div>
	          </div>
	        </div>
	        <div class="rightIcon">
	          <div class="icon">></div>
	        </div>
	      </router-link>
		</div>
		</div>
	</div>
</template>
<script>
	import vHeader from '../../components/header'
	import { Box,XProgress } from 'vux'
  import { getMaterial } from '../../api/api'
	export default{
		components: { vHeader,XProgress,Box },
    mounted(){
      //获取入职材料信息
      if(this.$store.state.hid){
	      this.hid = this.$store.state.hid
      		this.getMaterialInfo();
	    }
	    this.routerLink = 'InformationCollection'
    },
    methods:{
      getMaterialInfo(){
        getMaterial({rsHireId:this.hid}).then(res=>{
          if(res && res.retCode == '000000'){
            this.allRes = res.retData
            //判断进度
            let total = 0
            let count = 0
            res.retData.forEach((val)=>{
            	if(val.cYesNo1 == 'Y'){
            		if(val.cYesNo == 'Y'){
            			total++
            			if(val.uploaded){
            				count++
            			}
            		}
            	}
            })
            this.percent2 = (count/total)*100
          }else{
            this.$vux.alert.show({
              title: '',
              content: res.retMsg
            })
         }
        }).catch(res=>{
          this.$vux.alert.show({
            title: '警告',
            content: '网络异常，请稍后重试'
          })
        })
      }
    },
		data() {
			return{
				allRes: [],
				percent2: 0,
				hid:'',
				routerLink: ''
			}
		},
		filters: {
	    	uploadState: (val)=>{
	    		if(!val){
	    			return '尚未上传'
	    		}else{
	    			return '已上传'
	    		}
	    	}
	    },
	}
</script>
<style lang="scss">
	.uploadRes{
		.upbg{
			width:98%;
			margin-left: 1%;
			box-shadow:5px 5px 5px #ccc;
			text-align: left;
			margin-bottom: 10px;
			padding:20px;
			.progrs{
				width:20%;
				display:inline-block;
				text-align:center;
			}
			.probar{
				width:75%;
				display:inline-block;
				text-align:left;
				.weui-progress__bar{
					height: 8px;
					.weui-progress__inner-bar{
						background-color: #FF9900;
						border-radius: 6px;
					}
				}
			}
			.leftIcon{
				display:inline-block;
				width:15%;
				text-align: text-top;
			}
			.midContent{
				display:inline-block;
				width:45%;
				h6{
					font-size:18px;
					color:#707070;
				}
				div{
					color: #e06421;
					font-size: 13px;
				}
			}
			.rightIcon{
				width:25%;
				text-align:right;
				display:inline-block;
			}
		}
	}
</style>
